import React,{useState,useEffect} from 'react'
import {history,connect} from 'umi'
import { DownOutlined, SmileOutlined ,EllipsisOutlined} from '@ant-design/icons';
import { Dropdown, Menu, Space } from 'antd';
import ReactDOM from 'react-dom'
import Editor from 'for-editor'
import './edit.less'
import {
  AutoComplete,
  Cascader,
  Checkbox,
  Col,
  Form,
  InputNumber,
  Row,
  Switch,
  Select,
} from 'antd';

import {Input,Button,Drawer} from 'antd'
type Props = {}
const { Option } = Select;
const { TextArea } = Input;

const Editsh = (props: any) => {
  const list:any=history.location
  console.log(list);
  const {dispatch}=props
  const content={
    content:list.state.data.content
  }
  const [title,setTitle]=useState(list.state.data.title)
  const [editstate,setEditstate] =useState(content.content)
  const [markdown,setContent]=useState('')
  useEffect(()=>{
   setContent(list.state.data.content)
 },[])
  const [open, setOpen] = useState(false);
  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
  };

 const handleChange=(val:any)=> {
  setEditstate(val)

  }


const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};
  const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };
  const menu = (
    <Menu
      items={[
        {
          key: '1',
          label: (
            <p>
              查看
            </p>
          ),
        },
        {
          key: '2',
          label: (
            <p onClick={showDrawer}>
              设置
            </p>
          ),
        },
        {
          key: '3',
          label: (
            <p>
            保存草稿
          </p>
          ),

        },
        {
          key: '4',
          label: (
            <p onClick={()=>{
              dispatch({
                type:"work/editdel",
                payload:list.state.data.id
              })
            }}>
            删除
          </p>
          ),
        },
      ]}
    />
  );

  return (
    <div>
      <div className='edit_top'>
        <p><span>X</span><Input placeholder='请输入文章标题' style={{width:"400px"}} value={title} onChange={(e)=>{
        setTitle(e.target.value);

        }}/></p>
        <p><Button type="primary" onClick={()=>{
           let obj={
            id:list.state.data.id,
            content:editstate,
            title:title
          }
          console.log(obj,'++++++++++++++++++++++++++');

          dispatch({
            type:"work/edit",
            payload:{
              id:list.state.data.id,
              content:editstate,
              title:title
            }
          })
        }}>发布</Button>
        <Dropdown overlay={menu}>
    <a onClick={e => e.preventDefault()}>
      <Space>

      <EllipsisOutlined />
      </Space>
    </a>
  </Dropdown>
        </p>
        <Drawer title="文章设置" placement="right" onClose={onClose} open={open}>
      <Form
      {...formItemLayout}

      name="register"
      onFinish={onFinish}
      initialValues={{
        residence: ['zhejiang', 'hangzhou', 'xihu'],
        prefix: '86',
      }}
      scrollToFirstError
    >
          <Form.Item
        name="intro"
        label="文章摘要"
      >
        <Input.TextArea showCount maxLength={100} />
      </Form.Item>
      <Form.Item
        name="password"
        label="访问密码"

        hasFeedback
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="password"
        label="付费查看"

        hasFeedback
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="nickname"
        label="Nickname"
        tooltip="What do you want others to call you?"
        rules={[{ required: true, message: 'Please input your nickname!', whitespace: true }]}
      >
        <Input />
      </Form.Item>
      <Form.Item name="switch" label="开启评论" valuePropName="checked">
        <Switch />
      </Form.Item>
      <Form.Item name="tui" label="首页推荐" valuePropName="checked">
        <Switch />
      </Form.Item>
      <Form.Item label="选择分类" hasFeedback >
      <Select  allowClear>
        <Option value="1">node</Option>
        <Option value="2">vue</Option>
        <Option value="3">react</Option>
        <Option value="4">面试</Option>
        <Option value="5">前端</Option>
        <Option value="6">后端</Option>
        <Option value="7">开发</Option>
        <Option value="8">代码</Option>
        <Option value="9">代码人生</Option>
      </Select>
    </Form.Item>


    <Form.Item
        name="passwor1d"
        label="文章封面"

        hasFeedback
      >
        <Input placeholder='或输入外部连接'/>
      </Form.Item>

      <Form.Item >
        <Button type="primary" htmlType="submit">
          确认
        </Button>
      </Form.Item>
    </Form>
      </Drawer>
      </div>
      <Editor value={editstate}    onChange={handleChange} />

    </div>
  )
}

export default connect(({ work }: any) => work)(Editsh)
